import { Input, Modal } from "antd";
import action from "@/store/action";
import { useDispatch, useSelector } from "react-redux";
import { Icon } from "@iconify/react";
import { useEffect, useMemo, useRef, useState } from "react";
import { api } from "@/api";
import { debounce } from "lodash";
import styled from "styled-components";
import { Link } from "react-router-dom";

const SearchModal = () => {
  const { searchFlag } = useSelector((state) => state.app);
  const dispath = useDispatch();
  const containerRef = useRef();
  const ulRef = useRef();

  const [keyword, setKeyword] = useState("");
  const [articleList, setArticleList] = useState([]);

  async function handleSearch(val) {
    if (val.trim() === "" && val) return;
    const res = await api.searchArticles({ keyword: val });
    setArticleList(res.data);
    setKeyword(val);
  }

  useEffect(() => {
    const handleStyle = () => {
      if (!ulRef.current) {
        containerRef.current.style.overflowY = "none";
        return;
      }
      if (ulRef.current.clientHeight > containerRef.current.clientHeight) {
        containerRef.current.classList.remove("not-have-scrollbar");
        containerRef.current.style.overflowY = "scroll";
      } else {
        containerRef.current.style.overflowY = "none"; // 清除自定义滚动条样式
        containerRef.current.classList.add("not-have-scrollbar");
      }
    };
    searchFlag && handleStyle();
  }, [articleList.length, searchFlag]);

  return (
    <>
      <Modal
        title="本地搜索"
        open={searchFlag}
        onCancel={() => {
          dispath(action.app.setSearchFlag(false));
        }}
        footer={null}
        style={{
          width: "150rem",
        }}
        centered
      >
        <Input
          prefix={<Icon icon="mdi:flash" color="#ffe666" fontSize="20px" />}
          style={{ borderRadius: "15px", height: "40px" }}
          placeholder="请输入文章标题或内容"
          allowClear
          onChange={debounce((e) => {
            handleSearch(e.target.value);
          }, 300)}
        />
        <hr
          style={{
            borderStyle: "dashed",
            borderWidth: "2px",
            borderColor: "rgba(210, 235, 253, 1)",
            marginTop: "3.75rem",
            marginBottom: "3.75rem",
          }}
        />
        {/* 放置搜索文章 */}
        <div
          ref={containerRef}
          className="container"
          style={{
            height: "100rem",
          }}
        >
          {articleList.length ? (
            <ul ref={ulRef}>
              {articleList.map((item) => {
                return (
                  <li key={item.id}>
                    <Link to={`/article/${item.id}`}>
                      <span
                        dangerouslySetInnerHTML={{
                          __html: item.title,
                        }}
                      ></span>
                    </Link>
                    <p
                      className="ell"
                      dangerouslySetInnerHTML={{
                        __html: item.content,
                      }}
                    ></p>
                    <hr
                      style={{
                        borderStyle: "dashed",
                        borderWidth: "2px",
                        borderColor: "rgba(210, 235, 253, 1)",
                        marginTop: "3.75rem",
                        marginBottom: "3.75rem",
                      }}
                    />
                  </li>
                );
              })}
            </ul>
          ) : keyword ? (
            <div>找不到查询的内容：{keyword}</div>
          ) : null}
        </div>
      </Modal>
    </>
  );
};

export default SearchModal;
